<!-- 角色菜单绑定 -->
<template>
  <el-tree
    ref="menuTree"
    v-loading="lodding"
    :data="menus"
    show-checkbox
    node-key="id"
    :props="defaultProps"
  >
    <span slot-scope="{ node ,data }" class="custom-tree-node">
      <span>
        {{ node.label }}
      </span>
      <span style="margin-left: 16px">
        <el-tag v-if="data.menuType === 4" size="mini" type="warning"> 按钮</el-tag>
      </span>
      <span style="margin-left: 16px">
        <el-tag v-if="data.menudap === 1" size="mini" type="info">PC端</el-tag>
        <el-tag v-if="data.menuAdap === 2" size="mini">移动端</el-tag>
        <el-tag v-if="data.menuAdap === 3" size="mini" type="success">自适应</el-tag>
      </span>
    </span>
  </el-tree>
</template>

<script>
import { menusTree } from '@/api/sys/menu'
import { listByRoleId, add } from '@/api/sys/RoleMenu'

export default {
  name: 'RightIndex',
  props: {
    roleId: {
      type: [String, Number], // 角色id
      default: () => { return null }
    },
    code: {
      type: String, // 角色代码
      default: () => { return null }
    }
  },
  data() {
    return {
      lodding: false,
      permission: new Map(),
      menus: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    roleId(n, o) {
      if (!n) {
        this.getMenusTree()
      } else if (n !== o) {
        listByRoleId(n).then(res => {
          const ched = res.data
          this.$refs.menuTree.setCheckedKeys([])
          if (ched && ched.length > 0) {
            ched.forEach(key => {
              this.$refs.menuTree.setChecked(key.menuId, true, false)
            })
          }
        })
      }
    }
  },
  mounted() {
    this.getMenusTree()
    this.permission = this.$store.state.menu.buttonPermission.get('SysRole')
  },
  methods: {
    saveRoleWithMenu() {
      this.lodding = true
      const menuIds = [
        ...this.$refs.menuTree.getCheckedKeys(),
        ...this.$refs.menuTree.getHalfCheckedKeys()
      ]
      add({ roleId: this.roleId, menuIds: menuIds }).then(res => {
        if (res && res.code === '200') {
          setTimeout(() => {
            this.lodding = false
            this.$notify({
              title: '提示',
              message: '权限绑定成功',
              type: 'success',
              duration: 2500
            })
          }, 200)
        } else {
          this.lodding = false
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: '权限绑定失败',
          type: 'error',
          duration: 2500
        })
        console.error(error)
        this.lodding = false
      })
    },
    getMenusTree() {
      this.lodding = true
      menusTree({ menuType: 7 }).then(res => {
        this.menus = res.data
        this.$refs.menuTree.setCheckedKeys([])
        setTimeout(() => {
          this.lodding = false
        }, 200)
      }).catch(err => {
        console.log(err)
        this.lodding = false
      })
    }
  }

}
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    font-size: 14px;
    padding-right: 8px;
  }
</style>
